<template>
  <div class="publicopinionlist">
    <div class="toper">
      <div class="head">
        <div class="title">简报制作</div>
        <div class="desc">半自动化生成或舆情分析报告<i></i></div>
      </div>
      <div class="liuchen">
        <div class="left">
          <step :data='1'></step>
        </div>
        <div class="right">
          <div class="num">
            <b v-text='materialnum()'></b>
            <div class="desc">当前素材数</div>
          </div>
          <div class="edit">
            <div class="generate" @click="$router.push('/brief/confirmsc')">生成简报</div>
            <div class="choose" @click="$router.push('/brief/confirmsc')">挑选素材</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab " @click="$router.push('/brief/step01')">素材库</div>
      <div class="tab active">舆情列表</div>
      <div class="tab " @click="$router.push('/brief/textsearch')">全文搜索</div>
    </div>
    <div class="panel" :class="{active: simplify}">
      <div class="largeitem">
        <div class="title">监测时间</div>
        <div class="body">
            <el-date-picker
            style="margin-right:0"
              v-model="timerange[0]"
              type="datetime"
              :picker-options="pickerBeginDateafter"
              placeholder="选择日期时间">
            </el-date-picker>
            <div class="gang"></div>
            <el-date-picker
              v-model="timerange[1]"
              type="datetime"
              :picker-options="pickerBeginDateBefore"
              placeholder="选择日期时间">
            </el-date-picker>
            <el-button @click="setTime()">确定</el-button>
          <DateShow2 v-on:setTime="setDateShow($event)" :data='condition' class="date-show" v-model="timerange"></DateShow2>
        </div>
      </div>
      <div class="smallitem" v-for="(item,windex) in condition.radiodata" :key="windex">
        <div class="title">{{item.label}}</div>
        <div class="body">
          <div class="radio" v-for="(i,lindex) in item.item" :key="lindex">
            <div class="name" :class="{active:item.checked == i }" @click="checkitem(item,lindex)">{{i}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="filter">
      <div class="head">筛选条件：</div>
      <div class="body"> 
        <div class="filterItem" v-for="(item,index) in condition.radiodata"  :key="index" v-if="filters.indexOf(item.checked)==-1">
          <span class="body">{{item.checked}}</span>
          <div class="close" @click="deleteScreen(index)"> ×</div>
        </div>
      </div>
      <el-button class="empty" @click="empty()"> 清空筛选条件</el-button>
      <div class="expand" @click="simplify = !simplify" :class="{active: simplify}">
        展开筛选条件<i class="icon el-icon-d-arrow-left"></i>
      </div>
    </div>
    <div class="types">
      <div v-for="(item,index) in webSite" :key="index" :class="{active:index==tindex}" @click="gettypes(item,index)">
        {{item.websiteName}}({{item.doc_count}})
      </div>
    </div>
    <div class="bodyer">
      <div class="handle">
        <el-checkbox class="checkbox" @change="checkAll()" v-model="checkAllFlag"></el-checkbox>
        <el-button class="right" @click="addAll()">批量加入</el-button>
      </div>
      <div class="news">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="checkbox">
            <el-checkbox v-model="item.checked"></el-checkbox>
          </div>
          <div class="content">
            <div class="main">
              <div class="pic">
                <div class="img" v-bind:style="{backgroundImage:item.urlimg}"></div>
                <div class="label">{{item.webSite.substring(0,8)}}</div>
              </div>
              <div class="text">
                <div class="head">
                  <div class="title" v-html="filterHtml(item.title)" @click="queryarticle(item)"></div>
                  <div  class="similar" v-show="item.doc_count&&item.doc_count>1">
                  相似文章 {{item.doc_count}}</div>
                  <div class="qx">倾向性: <TendLabel :tend="parseInt(item.positiveOrNegative)"></TendLabel></div>
                </div>
                <div class="body" v-html="filterHtml(item.content)"></div>
              </div>
            </div>
            <div class="imgbtns">
              <div class="imbtn add" v-show="item.addmaterial ==false" @click="addbriefn(item)">加入简报素材</div>
              <div class="imbtn addsuccess" v-show="item.addmaterial==true">已加入简报素材</div>
            </div>
          </div>
          <div class="time">
            <div>{{item.poTime|fomartDate(item.poTime)}}</div>
            <div>{{item.poTime|fomartTime(item.poTime)}}</div>
          </div>
        </div>
      </div>
      <div class="pagination">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNum"
		      :page-sizes="[30, 50, 80, 100]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
    </div>
      
  </div>
</template>
<script>
import step from './step'
import DateShow2 from './dateShow2'
import moment from 'moment'
import TendLabel from 'components/common/TendLabel'
let condition = {
  id:'',
  startTime:moment().startOf('day'),
  endTime:moment(),
  websiteId:-1,
  radiodata:[
    {
      label: '倾向性',
      item: ['全部','负面','正面','中性'],
      checked:'全部'
    },{
      label: '监测范围',
      item: ['全部', '全国','本地','境外'],
      checked:'全部'
    },{
      label: '时间排序',
      item: ['时间降序', '时间升序','相关性排序'],
      checked:'时间降序'
    },{
      label:'相似文章',
      full:true,
      item:['展开','合并'],
      checked:'展开'
    }]
}
let types = [{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135},{name:'全部',num:135}]
export default {
  name:'publicopinionlist',
  components: {step,DateShow2,TendLabel},
  data(){
    return{
      timerange:[moment().startOf('day'),moment()],
      condition,
      iindex:'0',
      types,
      uptypes:[],
      tindex:0,
      total:0,
      pageNum:1,//第几页
      pageSize:30,//条数
      filters: ['全部','全部','时间降序','展开'],
      simplify:false,
      list:[],
      webSite:[],
      keywords:[],
      checkAllFlag:false,
      pickerBeginDateBefore: {
        disabledDate: (time) => {
            let beginDateVal = this.timerange[0];
            if (beginDateVal) {
                return time.getTime() < beginDateVal;
            }
        }
      },
      pickerBeginDateafter: {
        disabledDate: (time) => {
            let afterDateVal = this.timerange[1];
            if (afterDateVal) {
                return time.getTime() > afterDateVal;
            }
        }
      },
    }
  },
  watch:{
    condition:{
      handler:function(val,oldVal){
          this.timerange=[val.startTime,val.endTime]
          this.querymessage()
          this.queryTypes()
        },
      deep:true
    }
  },
  mounted(){
    this.querymessage()
    this.getWebSite()
  },
  filters:{
    fomartDate:function(time){
      return moment(parseInt(time)).format('YYYY-MM-DD')
    },
    fomartTime:function(time){
      return moment(parseInt(time)).format('HH:mm:ss')
    },
  },
  methods:{
    queryarticle(item){
      let count = 0
      if (item.doc_count&&item.doc_count==1) {
        this.$store.commit('setxxcount',{
          count:1
        });
      }
      let id = item.id
      let pirnt = item.titleContentPrint
      this.$store.dispatch('queryarticle',{
        id:id,
        keywords:this.keywords,
        titleContentPrint:pirnt,
        count:count
      });
    },
    materialnum(){
      let num = 0
      if(localStorage.Temporarymaterial){
        num = JSON.parse(localStorage.Temporarymaterial).length
      }
      return num
    },
    checkAll(){
      this.list.map(d=>d.checked = this.checkAllFlag)
    },
    checkitem(a,b){
      let radio = a.item[b]
      a.checked = radio
    },
    gettypes(item,index){
      this.condition.websiteId = item.websiteId
      this.tindex = index
    },
    deleteScreen(index){
      this.condition.radiodata[index].checked = this.filters[index]
    },
    empty(){
      this.condition.radiodata.map((d,i) => {
        d.checked = this.filters[i]
      })
    },
    setTime(){
      this.condition.startTime = this.timerange[0]
      this.condition.endTime = this.timerange[1]
    },
    setDateShow(arr){
      this.condition.startTime = arr[0]
      this.condition.endTime = arr[1]
    },
    addbriefn(item){
      let arr = []
      if(localStorage.Temporarymaterial){
        arr = JSON.parse(localStorage.Temporarymaterial)
      }
      if(arr.length>=20){
        this.$message.error('素材库最多为20条')
        return
      }
      if (!arr.includes(item.id)){
          arr.push(item.id)
      }
      localStorage.Temporarymaterial = JSON.stringify(arr)
      item.addmaterial = true
      this.$message.success('已加入')
      this.materialnum()
    },
    async addAll(){
      let newlist = this.list.filter(d => d.checked).map(d=>d.id) 
      let arr = []
      if(localStorage.Temporarymaterial){
        arr = JSON.parse(localStorage.Temporarymaterial)
      }
      let _ = [...new Set(arr.concat(newlist))]
      if(_.length>=20){
        _ = _.slice(0,20)
        this.$message.success('最多20条数据')
      }
      this.list.map((d)=>{
        if(_.includes(d.id)){
          d.addmaterial = true
        }
      })
      localStorage.Temporarymaterial = JSON.stringify(_)
      this.$message.success('已加入')
      this.materialnum()
    },
    async getWebSite(){
      let res = await this.$http.get('vrv-monitor-platform-web/data/queryTodayOpinion?aggsField=webSiteType&positiveOrNegative=-1')
      let data = res.body.data
      let all = data.reduce((a, d) => a + parseInt(d.doc_count), 0)
      data.unshift({
        websiteName:'全部',
        doc_count:all,
        websiteId:'-1'
      })
      this.webSite = data
      this.queryTypes()
    },
    //更新载体类型
    async queryTypes(){
      let ch1 = {'负面':2,'正面':1,'中性':0,'全部':-1}//正负面0
      let ch2 = {'全部':[-1,-1],'全国':[-1,0],'本地':[1,0],'境外':[-1,1],}//监测范围1
      let ch4 = {'时间升序':['poTime','asc'],'时间降序':['poTime','desc'],'相关性排序':['_score','desc']}//时间排序3
      let ch5 = {'合并':'count','展开':'all'} //相似4
      let res = await this.$http.post('vrv-monitor-platform-web/data/queryTypes',{
        topicId:'',
        categoryId:'',
        startTime:this.condition.startTime ? 
          moment(this.condition.startTime).format('YYYY-MM-DD HH:mm:ss') :
          this.timerange[0]||moment().startOf('day'),
        endTime:this.condition.endTime ?
          moment(this.condition.endTime).format('YYYY-MM-DD HH:mm:ss') : moment(),
        sortType:ch4[this.condition.radiodata[2].checked][1],
        scope:ch2[this.condition.radiodata[1].checked][0],
        abroad:ch2[this.condition.radiodata[1].checked][1],
        websiteType:this.condition.websiteId,
        positiveOrNegative:ch1[this.condition.radiodata[0].checked],
        searchType:ch5[this.condition.radiodata[3].checked],
        limit:this.pageSize,
        sortField:ch4[this.condition.radiodata[2].checked][0],
        currentPage:1
      })
      if(res.body.success==true){
        this.uptypes = res.body.data
        let t = this.uptypes.reduce((a,d) => a+parseInt(d.doc_count),0)
        this.webSite = this.webSite.filter(d => d.websiteName != '全部').map(d => ({
          websiteName:d.websiteName,
          doc_count : function(){
            var i = this.uptypes.filter(x => parseInt(x.key)==parseInt(d.websiteId))[0]
            return i ? i.doc_count : 0 
          }.call(this),
          websiteId : d.websiteId
        }))
        this.webSite.unshift({
          websiteName:'全部',
          doc_count:t,
          websiteId:'-1'
        })
      }

    },
    handleSizeChange(val) {
      this.pageSize = val
      this.querymessage()
    },
    handleCurrentChange(val){
      this.pageNum = val
      this.querymessage()
    },
    filterHtml(value){
      return value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
    },
    async querymessage(){
      this.$store.commit('LoadingTrue');
      let ch1 = {'负面':2,'正面':1,'中性':0,'全部':-1}//正负面0
      let ch2 = {'全部':[-1,-1],'全国':[-1,0],'本地':[1,0],'境外':[-1,1],}//监测范围1
      let ch4 = {'时间升序':['poTime','asc'],'时间降序':['poTime','desc'],'相关性排序':['_score','desc']}//时间排序3
      let ch5 = {'合并':'count','展开':'all'} //相似4
      let res = await this.$http.post('vrv-monitor-platform-web/data/query',{
          topicId:'',
          categoryId:'',
          startTime:this.condition.startTime ? 
            moment(this.condition.startTime).format('YYYY-MM-DD HH:mm:ss') :
            this.timerange[0]||moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          endTime:this.condition.endTime ?
            moment(this.condition.endTime).format('YYYY-MM-DD HH:mm:ss') : moment().format('YYYY-MM-DD HH:mm:ss'),
          sortType:ch4[this.condition.radiodata[2].checked][1],
          scope:ch2[this.condition.radiodata[1].checked][0],
          abroad:ch2[this.condition.radiodata[1].checked][1],
          websiteType:this.condition.websiteId,
          positiveOrNegative:ch1[this.condition.radiodata[0].checked],
          searchType:ch5[this.condition.radiodata[3].checked],
          currentPage:this.pageNum,
          limit:this.pageSize,
          sortField:ch4[this.condition.radiodata[2].checked][0]
        })
      this.$store.commit('Loadingfalse');
      this.total = res.body.totals
      let value = res.body.data
      this.keywords = res.body.keywords
      this.list = (value[0] && value[0]['data']) ? value.map(d => ({doc_count: d.doc_count, ...d.data[0]})) : value
      this.list.map((d)=>{
        this.$set(d,'checked', false) 
        let arr = []
        if(localStorage.Temporarymaterial){
          arr = JSON.parse(localStorage.Temporarymaterial)
        }
        if (arr.indexOf(d.id)!=-1){
          this.$set(d,'addmaterial', true)
        }else{
          this.$set(d,'addmaterial', false)
        }
        let imgurl = d.domain
        this.$http.get(`static/${imgurl}.png`).then(res=>{
          this.$set(d,'urlimg', `url(static/${imgurl}.png)` )
        }).catch(err=>{
          this.$set(d,'urlimg',"url('static/defult.png')")
        })
      })
    }
  }
  
}
</script>
<style lang="stylus" scoped>
.gang
  display inline-block 
  width 15px
  height 3px
  background #898989
  margin 0 3px;
  transform translateY(-1.5px)
.toper
  height 250px
  padding 30px
  box-sizing border-box
  >.head
    height 40px
    font-size 0
    border-bottom 1px solid #dcdcdc 
    box-sizing border-box
    .title
      display inline-block
      font-size 1.3rem
      color #555
      font-weight bold
    .desc
      display inline-block
      margin-left 8px
      font-size 14px
      color #999
      i
        display inline-block
        margin-left 8px
        width 14px
        height 14px
        background-image url('img/brief-why.png')
        background-repeat no-repeat
        background-size cover
  .liuchen
    margin-top 38px
    font-size 0
    display flex
    .left
      flex 1
    .right
      width 250px
      font-size 0
      .num
        float left
        b
          display block
          font-size 40px
          color #e75a46
          text-align center
        .desc
          font-size 18px
          color #333
      .edit
        float right
        >div
          width 120px
          height 34px
          color #fff
          background-position 10% 55%
          font-size 12px
          line-height 34px
          text-indent 40px
          background-repeat no-repeat
          &.generate
            background-color #e85a47
            background-image url(img/generate.png)
            border-radius 8px
          &.choose
            background-color #e85a47
            background-image url(img/choose.png)
            border-radius 8px
            margin-top 10px
        .desc
          font-size 12px
          color #999
          text-indent 0
          >i
            display inline-block
            color #e85a47
            line-height 34px
.tabs
  background #f0f5fb
  height 40px
  padding 14px 30px 0 30px
  border-bottom 1px solid #dcdcdc
  font-size 0
  .tab
    display inline-block
    width 120px
    height 39px
    line-height 40px
    background #fff
    font-size 14px
    color #555
    text-align center
    border-top-right-radius 8px
    border-top-left-radius 8px
    cursor pointer
    margin-left 8px
    &:first-of-type
      margin-left 0
    &.active
      border 1px solid #dcdcdc
      border-bottom 1px solid #fff
      color #ec6941
      font-weight bold
.panel
  height 180px
  overflow hidden
  transition height 0.65s 
  &.active
    height 70px
  .largeitem
    height 70px
    font-size 0
    border-bottom  1px solid #dcdcdc
    box-sizing border-box
    overflow hidden
    .title
      float left
      width 140px
      background #ebebeb
      line-height 70px
      font-size 14px
      color #333
      padding-left 20px
      box-sizing border-box
    .body
      line-height 70px
      vertical-align top
      padding-left 165px
      font-size 14px
      >.el-date-editor
        width 220px
      >button
        margin-left 10px
        width 90px
      >.date-show
        float right
        font-size 20px
.smallitem
  overflow hidden
  height 52px
  width 50%
  float left
  line-height 52px
  border-bottom 1px solid #dcdcdc
  >.title 
    height 100%
    width 140px
    float left
    background #ebebeb
    padding-left 20px
    box-sizing border-box
  >.body
    height 100%
    font-size 0
    float left
    padding-left 24px
    .radio
      display inline-block
      vertical-align top
      width 7vw
      .name
        display inline-block
        margin-top 10px
        font-size 14px
        height 32px
        line-height 32px
        border-radius 5px
        padding 0 14px
        cursor pointer
        white-space nowrap
        &.active
          background #e85a47
          color #fff
.filter
  height 3.2rem
  line-height @height
  position relative
  >.head
    width 6.8rem
    box-sizing: border-box
    padding-left 1.5rem
    font-size 0.88rem
    float left
    color #666666
  >.body
    margin-left 6.8rem
  .empty
    position absolute
    top 10px
    right 500px
    color #026bd6
    border-color #026bd6
  >.btn.save
    right 21rem
  >.expand
    position absolute
    top 0px
    right 1.4rem
    font-size .88rem
    height 2.4rem
    line-height 2.8rem
    border 1px solid #dcdcdc
    border-top 0
    box-shadow 0 2px 2px #dcdcdc
    padding 0 1.6rem
    background white
    border-bottom-right-radius .5rem
    border-bottom-left-radius .5rem
    color #666666
    cursor pointer
    >.icon
      margin-left 10px
      transition all .8s ease
      transform rotate(90deg)
    &.active>.icon
      transform rotate(-90deg)

.filterItem
  display inline-block
  height 2rem
  box-sizing border-box
  padding .18rem
  border-radius (@height / 2)
  line-height 1.5rem
  font-size 0.88rem
  min-width 4rem
  margin 0 .5rem
  background white
  >.body
    margin-left 1rem
  >.close
    float right
    height 1.5rem
    width 1.5rem
    color #cecdcd
    border-radius (@height / 2)
    text-align center
    line-height 1.0rem
    font-size 1.4rem
    cursor pointer
    transform: translateY(1px)
.types
  display flex
  height 48px
  border 1px
  border-top 1px solid #dcdcdc
  border-bottom 1px solid  #dcdcdc
  >div
    flex 1
    background #eee
    text-align center
    line-height 48px
    border-left 1px solid #dcdcdc
    cursor pointer
    &:last-child
      border-right 1px solid #dcdcdc
    &.active
      background #e85a47
      color #fff
.bodyer
  >.title
    padding 20px 30px
    font-size 20px
    color #333
    box-sizing border-box
    cursor pointer
  >.handle
    height 50px
    line-height 50px
    background #f6f6f6
    padding-left 10px
    >.checkbox
      margin-right 40px
    >.right
      float right
      margin-right 50px
      margin-top 7px
  .news
    .item
      height 160px
      border-bottom 1px solid #dcdcdc
      display flex
      &:first-of-type
        border-top 1px solid #dcdcdc
      .checkbox
        width 70px
        padding-left 10px
        padding-top 10px
        box-sizing border-box
      .time
        width 150px
        >div
          text-align center
          color #333
          font-size 14px
          &:first-of-type
            margin-top 65px
      .content
        flex 1
        border-left 1px solid #dcdcdc
        border-right 1px solid #dcdcdc
        .main
          display flex
          height 120px
          .pic
            width 145px
            border-right 1px solid #dcdcdc
            text-align center
            >.img
              width 60px
              height 60px
              border 1px solid #dcdcdc
              border-radius 50%
              margin 5px auto
              margin-top 20px
              background-repeat no-repeat
              background-size 100%
          .text
            flex 1
            padding 15px 30px
            .head
              overflow hidden
              height 35px
              line-height 35px
              .title
                color #000
                float left
                font-size 0.88rem
                width 300px
              .qx
                float right
                color #666
              .similar
                font-size 14px
                margin-left 335px
                color red
            .body
              padding-top 0.8rem
              color #666
              font-size 0.88rem
              height 60px
              overflow hidden
              line-height 1.9rem
        .imgbtns
          height 40px
          border-top 1px solid #dcdcdc
          .imbtn
            float right
            height 30px
            line-height 30px
            margin-top 5px
            border-left 1px solid #dcdcdc
            padding  0 45px
            font-size 14px 
            cursor pointer
            color #666
            &.del
              background url(img/brief-del.png) no-repeat
              background-position 10% 50%
            &.add
              background url(img/brief-add.png) no-repeat
              background-position 10% 50%
            &.addsuccess
              color #9c97cb
              background url(img/brief-addsuccess.png) no-repeat
              background-position 10% 50%
.pagination
  text-align right
  padding 0.93rem 0.93rem
</style>

